﻿@model string
@{
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tabledata",
        Url = Url.Action("AppointmentData"),
        LoadingElementId = "loading",
        LoadingElementDuration = 2000,
        
    };
}
<script type="text/javascript">
    function OnSuccess(data) {
        var target = $('#tabledata');
        target.empty();
        for (var i = 0; i < data.length; i++) {
            target.append('<tr><td>' + data[i].ClientName + '</td><td>' + data[i].Date + '</td></tr>');
        }
    }
</script>

<h4>
    Appointment List</h4>
<div id="loading" style="display: none; color: Red; font-weight: bold">
    <p>
        Loading Data...</p>
</div>
@using (Ajax.BeginForm(ajaxOpts))
{
    <table>
        <thead>
            <th>
                Client Name
            </th>
            <th>
                Appointment Date
            </th>
        </thead>
        <tbody id="tabledata">
            @Html.Action("AppointmentData", new { id = Model })
        </tbody>
    </table>
    <p>
        @Html.DropDownList("id", new SelectList(new[] { "All", "Joe", "Jane", "Bob" }, (Model ?? "All")))
        <input type="submit" value="Submit" />
    </p>
}
@foreach (string str in new[] { "All", "Joe", "Jane", "Bob" })
{
    <div style="margin-right: 5px; float: left">
    @Ajax.ActionLink(str, "AppointmentData", new { id = str }, new AjaxOptions
            {
                LoadingElementId = "loading",
                Url = Url.Action("JsonData", new { id=str }),
                LoadingElementDuration = 2000,
                OnSuccess = "OnSuccess",
            })
    </div>
}
